<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>call and apply</title>
    <script src="ROOT_PATH/static/js/jquery-3.5.1.min.js"></script>
    <script src="ROOT_PATH/static/js/vue.min.js"></script>
</head>
<body>

</body>
</html>

<script>
    var name = '零点';
    var identifier = '狙击手';
    var person = {
        name : '郑吒',
        identifier : '中洲队队长',
        sayIntroduce : function(){
            let text = `我的名字是${this.name}，我是职务是${this.identifier}`;
            console.log(text);
        },
        sayHobby : function(hobby1, hobby2){
            let text = `我的名字是${this.name}，我喜欢${hobby1}和${hobby2}`;
            console.log(text);
        }
    }

    //call和apply的作用都是改变this的指向
    person.sayIntroduce.call();
    person.sayIntroduce.apply();

    person.sayIntroduce.call(person);
    person.sayIntroduce.apply(person);

    var person1 = {
        name : '张恒',
    }
    var person2 = {
        name : '程潇',
    }

    //call和apply的第一个参数都是一个对象，后面的参数则是一个一个传参和数组传参
    person.sayHobby.call(person1, '射击', '锻炼');
    person.sayHobby.apply(person2, ['美女', '还是美女']);

    function Grade(max, min, average){
        this.max = max;
        this.min = min;
        this.average = average;
    }

    function Subject(name, max, min, average){
        Grade.call(this, max, min, average);
        this.name = name;
    }

    var math = new Subject('math', 99, 61, 80);
    console.log(math);

    var arr = [1, 18, -28, 9];
    console.log(Math.min(...arr));
    console.log(Math.min.apply(Math, arr));
    console.log(Math.min.call(Math, ...arr));

    //...用法
    //函数调用时
    console.log(Math.min(...[1, 5, 18]));
    //函数定义时
    function getSum(...nums){
        var sum = 0;
        nums.forEach((item, index) => {
            sum += item;
        })
        return sum;
    }
    console.log(getSum(1, 18, 9, 8));
    //构造字面量数组
    var arr1 = [1, 2, 3];
    var arr2 = [...arr1,  ...arr1];
    console.log(arr2);
    //构造字面量对象
    var person3 = {
        name: 'tom',
        age: 18,
        address:'shanxi',
    }
    var person4 = {
        ...person3,
        money:10000,
    }
    console.log(person4);

</script>